<template>
  <div style="position: relative">
    <div class="contanier" v-if="RepotStatus == 1">
      <h2>{{ reportTitle }}</h2>
      <p>报告时间：{{ reportTime }}</p>
      <div class="report_btn">
        <a-popconfirm placement="bottomLeft" ok-text="是" cancel-text="否" @confirm="confirm">
          <template slot="title">
            <span>确定删除吗？</span>
          </template>
          <a-button style="margin-left: 30px" v-if="btnStatus == 1">删除报告</a-button>
        </a-popconfirm>
        <a-button type="primary" style="margin-left: 30px" @click="print">打印报告</a-button>
        <!-- <a-button type="primary" style="margin-left: 30px" @click="showModal">预览报告</a-button>
        <a-button type="primary" style="margin-left: 30px" @click="showDrawer">打印报告</a-button> -->
      </div>
      <a-divider></a-divider>
      <div class="model" ref="imageWrapper" id="posterHtml">
        <a-tabs type="card" @change="callback" size="large" :default-active-key="tabIndex">
          <a-tab-pane key="1" tab="患者档案">
            <BasicInfo ref="printBasicInfo" :first="currentPatient" @parentOnSave="onSave" @parentconfirm="confirm(1)" />
          </a-tab-pane>
          <a-tab-pane key="2" tab="量表评估">
            <Evalution ref="printEvalution" :first="currentPatient" @parentOnSave="onSave" @parentconfirm="confirm(2)" />
          </a-tab-pane>
          <a-tab-pane key="3" tab="逆转方案">
            <Reverse ref="printReverse" :first="currentPatient" @parentOnSave="onSave" @parentconfirm="confirm(3)" />
          </a-tab-pane>
        </a-tabs>
      </div>

      <a-modal v-model="visible" title="预览" @ok="handleOk" @cancel="closeModel" width="1200px">
        <div class="burr_f-haibao" v-if="count == 0">
          <img style="z-index: 100; width: 100%; height: 100%" :src="posterImg" />
        </div>
        <div class="burr_f-haibao" v-if="count == 1">
          <img style="z-index: 100; width: 100%; height: 100%" :src="posterImg" />
        </div>
        <div class="burr_f-haibao" v-if="count == 2">
          <img style="z-index: 100; width: 100%; height: 100%" :src="posterImg" />
        </div>
        <!-- <div class="LookReport">
          <a-button shape="circle" class="btn1" @click="count++" v-if="count !== 0">
            <a-icon type="left" />
          </a-button>
          <a-button shape="circle" class="btn2" @click="count--">
            <a-icon type="right" />
          </a-button>
        </div> -->
      </a-modal>
      <a-drawer
        title="打印报告"
        :width="1200"
        :visible="visible1"
        :body-style="{ paddingBottom: '80px' }"
        @close="onClose"
      >
        <div style="float: left; width: 70%">
          <div class="burr_f-haibao" v-if="count == 0">
            <img style="z-index: 100; width: 100%; height: 100%" :src="posterImg" />
          </div>
          <div class="burr_f-haibao" v-if="count == 1">
            <img style="z-index: 100; width: 100%; height: 100%" :src="posterImg" />
          </div>
          <div class="burr_f-haibao" v-if="count == 2">
            <img style="z-index: 100; width: 100%; height: 100%" :src="posterImg" />
          </div>
        </div>
        <div style="float: left; width: 30%; positon: relative">
          <a-form :form="form" layout="vertical" hide-required-mark style="margin-left: 50px; margin-bottom: 0">
            <a-row>
              <a-col :span="12">
                <a-form-item label="目标打印机">
                  <a-select default-value="1">
                    <a-select-option value="1"> 请选择 </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item label="页面" style="postion: absolute; top: -80px">
                  <a-select default-value="1">
                    <a-select-option value="1"> 全部 </a-select-option>
                    <a-select-option value="2"> 自定义 </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item label="布局" style="postion: absolute; top: -160px">
                  <a-select default-value="1">
                    <a-select-option value="1"> 纵向 </a-select-option>
                    <a-select-option value="2"> 横向 </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item label="彩色" style="postion: absolute; top: -230px">
                  <a-select default-value="1">
                    <a-select-option value="1"> 彩色 </a-select-option>
                    <a-select-option value="2">黑白色</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div
          :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1,
          }"
        >
          <a-button :style="{ marginRight: '8px' }" @click="onClose"> 取消 </a-button>
          <a-button type="primary" @click="onClose"> 打印 </a-button>
        </div>
      </a-drawer>
    </div>
    <div v-if="RepotStatus == 2" class="noneReport">
      <img src="../../assets/noneReport.png" alt="" />
      <p>暂无首诊报告</p>
      <a-button type="primary" class="btn" @click="ChangeReportStatus">生成报告</a-button>
    </div>
  </div>
</template>

<script>
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { getAction, postAction, deleteAction } from '@/api/manage'
import BasicInfo from './first/BasicInfo'
import Evalution from './first/Evalution'
import Reverse from './first/Reverse'
import html2canvas from 'html2canvas'
import print from '@/utils/print'

export default {
  name: 'First',
  components: { BasicInfo, Evalution, Reverse, html2canvas },
  data() {
    return {
      url: {
        getFirstReport: 'patient/report/first',
        createFirstReport: 'patient/report/create',
        removeFirstReport: 'patient/report/remove',
      },
      form: this.$form.createForm(this),
      visible: false,
      visible1: false,
      reportTitle: '糖尿病逆转首诊报告',
      reportTime: '',
      RepotStatus: 1,
      btnStatus: 1,
      id: '',
      imglength: 0,
      count: 0,
      tabIndex: '1',
      patientArchive: [],
      posterImg: require('../../assets/spin.gif'),

      currentPatient: {},
    }
  },
  created() {
    this.getTitle()
    this.getFirstReport()
    console.log('动态获取title', this.$route.query.title)
    // this.getFirstReport().catch((error) => {
    //   console.log(error)
    // })
  },
  mounted() {},
  methods: {
    print() {
      console.log(this.tabIndex)
      switch(this.tabIndex) {
        case '1':
          print(this.$refs.printBasicInfo)
          break;
        case '2':
          print(this.$refs.printEvalution)
          break;
        case '3':
          print(this.$refs.printReverse)
          break;
      }
      
    },
    getTitle() {
      if (this.$route.query.title !== undefined) {
        this.reportTitle = this.$route.query.title
        this.btnStatus = 2
      } else {
        this.reportTitle = '糖尿病逆转首诊报告'
        this.btnStatus = 1
      }
    },
    confirm() {
      let params = {
        id: this.id,
      }
      deleteAction(this.url.removeFirstReport, params).then((res) => {
        if (res.success) {
          this.$message.success('删除成功！')
          this.getFirstReport()
        }
      })
    },
    closeModel() {
      this.posterImg = require('../../assets/spin.gif')
    },
    ChangeReportStatus() {
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      let params = {
        patientId: patientId,
        type: 1,
      }
      postAction(this.url.createFirstReport, params).then((res) => {
        if (res.success) {
          this.getFirstReport()
          this.success()
          this.RepotStatus = 1
        }
      })
    },
    showDrawer() {
      this.count = 0

      let that = this
      let domObj = document.getElementById('posterHtml')
      html2canvas(domObj, {
        useCORS: true,
        allowTaint: false,
        logging: false,
        letterRendering: true,
        onclone(doc) {
          let e = doc.querySelector('#posterHtml')
          e.style.display = 'block'
        },
      }).then((canvas) => {
        that.posterImg = canvas.toDataURL('image/png')
      })
      this.visible1 = true
    },
    onClose() {
      this.visible1 = false
      this.posterImg = require('../../assets/spin.gif')
    },

    showModal() {
      this.count = 0

      let that = this
      let domObj = document.getElementById('posterHtml')
      html2canvas(domObj, {
        useCORS: true,
        allowTaint: false,
        logging: false,
        letterRendering: true,
        onclone(doc) {
          let e = doc.querySelector('#posterHtml')
          e.style.display = 'block'
        },
      }).then((canvas) => {
        that.posterImg = canvas.toDataURL('image/png')
      })
      this.visible = true
    },
    handleOk(e) {
      console.log(e)
      this.visible = false
    },
    getFirstReport() {
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]

      let params = {
        patientId: patientId,
      }

      getAction(this.url.getFirstReport, params).then((res) => {
        if (res.success) {
          this.id = res.result.dataId
          this.patientArchive = res.result.patientArchive
          this.reportTime = res.result.reportCreateTime
          console.log(this.patientArchive)
        }
        if (res.success == false) {
          this.RepotStatus = 2
        }
      })
    },

    callback(key) {
      this.tabIndex = key
      console.log(key)
    },
    success() {
      this.$message.success('首诊报告生成成功！')
    },
    onSave() {
      const isEmpty = (object) => {
        for (const [key, value] of Object.entries(object)) {
          if (key != 'patientId' && key != 'dataId' && key != 'createTime') {
            if (value != null && value != 0) {
              return false
            }
          } else {
            console.log(`${key}: ${value}`)
          }
        }

        return true
      }

      console.log(isEmpty(this.currentPatient))

      if (isEmpty(this.currentPatient)) {
        this.$message.error('请输入数据后再保存')
        console.log('Empty Data')
        return
      }

      this.updatedLifeStyle().catch((error) => {
        console.log(error)
      })
    },
  },
}
</script>

<style scoped >
.contanier {
  position: relative;
  padding: 1rem;
  background-color: #fff;
}
.report_btn {
  position: absolute;
  right: 10px;
  top: 10px;
}
.noneReport {
  position: absolute;
  top: 40px;
  left: 400px;
}
.noneReport img {
  width: 400px;
  height: 400px;
}
.noneReport p {
  position: absolute;
  left: 158px;
  top: 378px;
}
.noneReport .btn {
  position: absolute;
  left: 156px;
  top: 418px;
}
.LookReport {
  position: relative;
}
.LookReport .btn1 {
  position: absolute;
  top: -2214px;
  left: -22px;
}
.LookReport .btn2 {
  position: absolute;
  top: -2214px;
  left: 1124px;
}

</style>